<template>
  <div>
    <template>
      <el-dialog
        title="注册"
        :visible.sync="dialogFormVisible"
        width="30%"
      >
        <el-form
          :model="ruleForm"
          status-icon
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <!-- 用户名 -->
          <el-form-item
            label="学号"
            prop="username"
            style="padding-right:60px"
          >
            <el-input
              type="username"
              v-model="ruleForm.username"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <!-- 邮箱 -->
          <el-form-item
            label="邮箱"
            prop="email"
            style="padding-right:60px"
          >
            <el-input
              type="email"
              v-model="ruleForm.email"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <!-- 密码 -->
          <el-form-item
            label="密码"
            prop="password"
            style="padding-right:60px"
          >
            <el-input
              type="password"
              v-model="ruleForm.password"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <!-- 二次确认密码 -->
          <el-form-item
            label="确认密码"
            prop="checkPass"
            style="padding-right:60px"
          >
            <el-input
              type="password"
              v-model="ruleForm.checkPass"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item class="btns">
            <el-button
              type="primary"
              @click="register"
            >注册</el-button>
            <el-button
              type="info"
              @click="resetregister"
            >重置</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </template>
  </div>
</template>

<script>
export default {
  name: 'Register',
  data () {
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'))
      } else {
        if (this.ruleForm.checkPass !== '') {
          this.$refs.ruleForm.validateField('checkPass')
        }
        callback()
      }
    }
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.ruleForm.password) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }

    var usernamerules = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入学号'))
      } else if (!/^[0-9]+$/.test(value)) { callback(new Error('学号输入不符合格式')) }
    }

    var email = (rule, value, callback) => {
      if (value === '') callback(new Error('请输入邮箱'))
    }

    return {
      dialogFormVisible: false,
      ruleForm: {
        password: '',
        checkPass: '',
        username: '',
        email: ''
      },
      rules: {
        username: [{ validator: usernamerules, trigger: 'blur' }],
        password: [{ validator: validatePass, trigger: 'blur' }],
        checkPass: [{ validator: validatePass2, trigger: 'blur' }],
        email: [{ validator: email, trigger: 'blur' }]
      }
    }
  },

  methods: {
    resetregister () {
      this.$refs.ruleForm.resetFields()
      this.ruleForm.password = ''
      this.ruleForm.checkPass = ''
      this.ruleForm.username = ''
      this.ruleForm.email = ''
    },
    async register () {
      // this.$refs.ruleForm.validate(async callback => {
      //   if (!callback) {
      //     // this.$message({
      //     //   message: "请输入正确的登录格式",
      //     //   type: "error",
      //     //   duration: 3000
      //     // });
      //     console.log("fail");
      //     return;
      //   }
      //   console.log("success");

      // });
      const result = await this.$http.post(
        'https://virtserver.swaggerhub.com/young-zy/Forum/0.0.1/user',
        this.ruleForm
      )
      if (result.status === 204) {
        this.$message({
          message: '注册成功,网页刷新后请重新登录',
          type: 'success',
          duration: 3000
        })
        setTimeout(window.location.reload(), 5000)
      } else if (result.status === 405) {
        this.$message({
          message: '服务器繁忙，请稍后再试',
          type: 'error',
          duration: 3000
        })
        setTimeout(window.location.reload(), 5000)
      }
    }
  }
}
</script>

<style lang='less' scoped>
.login_box {
  background-color: #fff;
  position: absolute;
  left: 50%;
  transform: translate(-50%, 30%);
}

.loginlist {
  margin-top: 30px;
  padding-right: 70px;
}
.passwordlist {
  padding-right: 70px;
}

.btns {
  margin-top: 60px;
  margin-left: -90px;
}
</style>
